<template>
  <input
    @input="sendFn"
    v-bind:value="value"
    class="hm-input"
    :[attr]="{ success: isOk, err: !isOk }"
    type="text"
    @blur="blurFn"
  />
</template>
<script>
// blur：表单元素的失去焦点事件
export default {
  // 接收父组件传递过来的值
  props: {
    value: String, // 传入的value必须是一个字符串
    reg: {
      type: RegExp, // 表示传入的reg必须是正则表达式
      default: () => {
        // 这个正则表示内容不能为空
        return /^.{1,}/;
      },
    },
  },
  data() {
    return {
      isOk: true,
      attr: "",
    };
  },
  created() {
    // 初始化isOk的默认值
    if (this.reg.test(this.value)) {
      // 给输入框添加success类名
      this.isOk = true;
    } else {
      // 给输入框添加err类名
      this.isOk = false;
    }
  },
  methods: {
    blurFn() {
      // 将attr设置为class
      this.attr = "class";
      // console.log(9,this.value);
      // 手机正则，用于判断用户输入的手机号码是否正确
      // let reg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
      // test: 是正则表达式的方法，用于判断传入的内容是否符合正则表达式的规范
      // console.log(14,reg.test(this.value));
      if (this.reg.test(this.value)) {
        // 给输入框添加success类名
        this.isOk = true;
      } else {
        // 给输入框添加err类名
        this.isOk = false;
      }
    },
    // 绑定输入框的input事件，实时传递输入框的内容给父组件
    sendFn(event) {
      // 如何获取到输入框的内容？
      // 答：事件对象获取到 event.target.value
      // console.log(46, event);
      this.$emit("input", event.target.value);
    },
  },
};
</script>

<style lang="less" scoped>
.hm-input {
  border: none;
  border-bottom: 1px solid #666;
  width: 100%;
  line-height: 35px;
}
// 成功的颜色
.success {
  border-bottom-color: green;
  color: green;
}
// 失败的颜色
.err {
  border-bottom-color: red;
  color: red;
}
</style>